<template>
  <div id="app" class="grey-sample-pos">
    <!-- 头部导航 -->
    <van-nav-bar ref="header" title="坯布盘头样存放" left-arrow @click-left="comeBack" left-text="返回" >
      <template #right>
        <span @click="openScanWinFn"><van-icon name="scan" size="20" /></span>
        <span style="margin-left:0.5rem;" @click="openScanToPosWinFn"><van-icon name="plus" size="20" /></span>
      </template>
    </van-nav-bar>
    <!-- 筛选 -->
    <van-search v-model="queryParam.designNo" placeholder="请输入品号" @search="refreshPageFn" />

    <!-- 滚动 -->
    <better-scroll class="public-scroll" :data="detailData" :total-page="totalPage" :pulldown="true" :pullup="true" @pullup="loadNextPageFn" @pulldown="refreshPageFn">
      <van-row v-for="detail in detailData" style="padding:1rem;border-bottom: 1px solid #263c6b">
        <van-col :span="6">
          <van-image width="5rem" height="5rem" fit="fill" :src="detail.firstPic" @click="showPicPreViewFn(detail)">
            <template v-slot:error>加载失败</template>
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-col>
        <van-col :span="18" style="padding-left:1rem;">
          <div style="display: flex; justify-content: space-between;padding-bottom: 0.5rem;">
            <span>{{detail.designNo}}</span>
            <span>{{detail.craftId}}</span>
          </div>
          <div style="display: flex; justify-content: space-between;padding-bottom: 0.5rem;">
            <span>{{ detail.no }}</span>
            <span>{{ detail.opererName }}</span>
          </div>
          <div style="display: flex; justify-content: flex-end;">
            <span>{{ detail.operateAt }}</span>
          </div>
        </van-col>
      </van-row>
      <van-cell-group v-show="detailData.length !== 0">
        <div v-for="data in detailData" :key="data.id">
        </div>
      </van-cell-group>
      <van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" v-show="detailData.length === 0" description="暂无数据" />
    </better-scroll>

    <!-- 图片预览 -->
    <van-image-preview v-model="showPicPreView" :showIndex="false" :closeable="true" :images="picPreView">
    </van-image-preview>
  </div>
</template>

<script>
import {openWin,comeBack} from "@/utils";
import {loadGreySampleDetail, loadPicsFn} from "@/views/cloth/grey-sample-pos/main";


export default {
  name: "greySamplePos",
  data() {
    return {
      /* 查询相关 */
      queryParam: {
        designNo: "",
        pageNum: 1,
        pageSize: 6,
      },
      totalPage: 0,   //下拉分页加载必须

      /* 扫码相关 */
      scanParam: {
        no: "",
        craftId: 0,
      },

      /* 详情相关 */
      detailData: [],
      showPicPreView: false,
      picPreView: [],
    }
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      }
    }
  },
  methods: {
    comeBack,
    //初始化
    initFn(that) {
      window.api.addEventListener({
        name: "viewdisappear"
      }, function() {
        window.api.closeWin();
      });

      that.loadGreySampleDetailFn();
    },

    //加载样品详情
    loadGreySampleDetailFn() {
      let that = this;
      loadGreySampleDetail(that.queryParam, data => {
        that.totalPage = data.totalPage;
        data.list.forEach(detail => {
          detail.firstPic = "";
          detail.pics = [];
          loadPicsFn(that, detail);
          that.detailData.push(detail);
        });
      });
    },
    //加载下一页
    loadNextPageFn() {
      let that = this;
      that.queryParam.pageNum++;
      console.log("------>", that.queryParam.pageNum);
      that.loadGreySampleDetailFn();
    },
    //刷新
    refreshPageFn() {
      let that = this;
      that.queryParam.pageNum = 1;
      that.detailData.splice(0, that.detailData.length);
      that.loadGreySampleDetailFn();
    },

    //显示图片预览
    showPicPreViewFn(detail) {
      let that = this;
      that.showPicPreView = true;
      that.picPreView.splice(0, that.picPreView.length);
      detail.pics.forEach(pic => {
        that.picPreView.push(pic);
      });
    },

    //扫码位置查询
    openScanWinFn() {
      const that = this;
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          let content = ret.result;
          if(content.indexOf(",") == -1 || content.split(",")[0] != "98") {
            that.$toast.fail("不支持的二维码");
            return;
          }
          that.queryParam.no = content.split(",")[1];
          that.loadGreySampleDetailFn();
        }
      });
    },
    //打开扫码新增窗口
    openScanToPosWinFn() {
      openWin("scan-to-pos");
    },
  }
}
</script>

<style lang="scss">
.grey-sample-pos {
  .public-scroll {
    height: 84vh;
  }
  .van-search {
    z-index: 1;
  }
}
</style>